<template>
  <div>
    <el-dialog
      title="操作"
      :visible.sync="visible"
      width="1000px"
      :before-close="
        () => {
          $emit('close');
        }
      "
    >
      <el-form ref="form" label-width="120px">
        <el-form-item v-if="orderInfo.commodity" label="选择操作类型">
          <el-button
            :class="{ active: currentOperate === item.id }"
            @click="currentOperate = item.id"
            v-if="
              (item.is_serve == undefined ||
                (item.is_serve == 0 && orderInfo.commodity[0].is_serve != 1) ||
                (item.is_serve == 1 && orderInfo.commodity[0].is_serve == 1)) &&
                !(
                  item.disable.indexOf(orderInfo.status) !== -1 ||
                  (item.id === 3 && isVip)
                )
            "
            v-for="item in operateList"
            :key="item.id"
            size="small"
            >{{ item.name }}</el-button
          >
        </el-form-item>
        <el-form-item label="操作内容">
          <div v-if="currentOperate === 1" class="content">
            <span>支付金额(含运费)： </span>
            <el-input
              size="small"
              style="width:200px;"
              type="number"
              v-model="price"
            >
              <!-- <template slot="append">元</template\> -->
            </el-input>
            <el-button @click="changeOrderPayment" size="small" type="primary">
              确认
            </el-button>
          </div>
          <div v-if="currentOperate === 2">
            <el-row
              style="height:80px;background-color:#efefef;padding:5px 0;"
              v-for="item in orderInfo.commodity"
            >
              <el-col style="height:80px;" :span="11">
                <div class="small-cell">
                  <div class="good-item">
                    <img
                      style="height:50px; width:50px;"
                      :src="item.img"
                      alt=""
                    />
                    <div style="width:calc(100% - 60px);">
                      <div
                        style="height:40px; line-height:20px; overflow:hidden;"
                      >
                        {{ item.name }}
                      </div>
                      <div style="line-height:40px;">
                        单价：￥{{ item.price }}
                      </div>
                    </div>
                    <div style="width: 30px">×{{ item.number }}</div>
                  </div>
                </div>
              </el-col>
              <!-- <el-col style="height:80px;" :span="4">
                <div class="small-cell">{{}}</div>
              </el-col> -->
              <el-col style="height:80px;" :span="7">
                <div style="text-align:center;" class="small-cell">
                  {{ item.spec }}
                </div>
              </el-col>
              <el-col style="height:80px;" :span="3">
                <div style="text-align:center;" class="small-cell">
                  供应商
                </div>
              </el-col>
              <el-col style="line-height:80px;" :span="3">
                <el-button
                  v-if="currentOperate === 2"
                  @click="deliver(item)"
                  size="mini"
                  >发货</el-button
                >
              </el-col>
            </el-row>
          </div>
          <div class="content" v-if="currentOperate === 3">
            <el-form ref="refundForm" :model="refundForm" label-width="80px">
              <el-form-item
                prop="logistics"
                :rules="{
                  required: true,
                  message: '请填写退款金额',
                  trigger: 'blur'
                }"
                label="退款金额"
              >
                <el-input
                  size="small"
                  style="width:300px;"
                  v-model="refundForm.money"
                ></el-input>
              </el-form-item>
              <el-form-item
                prop="logistics_number"
                :rules="{
                  required: true,
                  message: '请填写退款理由',
                  trigger: 'blur'
                }"
                label="退款理由"
              >
                <el-input
                  style="width:300px;"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  :rows="4"
                  resize="none"
                  v-model="refundForm.reason"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="content" v-if="currentOperate === 4">
            <el-form ref="closeForm" :model="closeForm" label-width="80px">
              <el-form-item
                prop="reason"
                :rules="{
                  required: true,
                  message: '请填写关闭理由',
                  trigger: 'blur'
                }"
                label="关闭理由"
              >
                <el-input
                  style="width:300px;"
                  type="textarea"
                  size="small"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  :rows="4"
                  resize="none"
                  v-model="closeForm.reason"
                ></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button size="mini" @click="orderClose" type="primary"
                  >确认关闭</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="content" v-if="currentOperate === 5">
            <el-form ref="remarkForm" :model="remarkForm" label-width="80px">
              <el-form-item
                prop="remark"
                :rules="{
                  required: true,
                  message: '请填写备注',
                  trigger: 'blur'
                }"
                label="备注"
              >
                <el-input
                  style="width:300px;"
                  type="textarea"
                  size="small"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  :rows="4"
                  resize="none"
                  v-model="remarkForm.remark"
                ></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button size="mini" @click="orderRemark" type="primary"
                  >确认</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="content" v-if="currentOperate === 6">
            <el-form ref="serviceForm" :model="serviceForm" label-width="80px">
              <el-form-item
                prop="name"
                :rules="{
                  required: true,
                  message: '请填写师傅姓名',
                  trigger: 'blur'
                }"
                label="师傅姓名"
              >
                <el-input
                  style="width:200px;"
                  v-model="serviceForm.name"
                  size="mini"
                ></el-input>
              </el-form-item>
              <el-form-item
                prop="mobile"
                :rules="{
                  required: true,
                  message: '请填写师傅手机号',
                  trigger: 'blur'
                }"
                label="手机号"
              >
                <el-input
                  style="width:200px;"
                  type="tel"
                  size="mini"
                  v-model="serviceForm.mobile"
                ></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button size="mini" @click="orderService" type="primary"
                  >确认</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="content" v-if="currentOperate === 7">
            <el-form
              ref="distributeForm"
              :model="distributeForm"
              label-width="80px"
            >
              <el-form-item
                prop="agent"
                :rules="{
                  required: true,
                  message: '请选择社区代理',
                  trigger: 'blur'
                }"
                label="社区代理"
              >
                <el-autocomplete
                  style="width:200px;"
                  v-model="distributeForm.agentName"
                  :fetch-suggestions="querySearchAsync"
                  value-key="realname"
                  placeholder="请选择用户"
                  @select="handleSelect"
                ></el-autocomplete>
              </el-form-item>
              <el-form-item label="">
                <el-button size="mini" @click="orderDistribute" type="primary"
                  >确认</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <deliver
      :visible="deliverVisible"
      @close="handleClose"
      :item="deliverItem"
    ></deliver>
  </div>
</template>

<script>
import {
  getChooseAgentList,
  agentOrderDeliver,
  agentOrderShangmen
} from "@/api/agent-mng";
import { changeOrderPayment, closeOrder, remarkOrder } from "@/api/order-mng";
import deliver from "./deliver";
export default {
  props: ["visible", "orderInfo", "isVip"],
  data() {
    return {
      operateList: [
        { name: "改价格", id: 1, disable: [3, 2, -3, -2, -1, 1, 2, 3, 4, 5] },
        // {
        //   name: "分配订单",
        //   id: 7,
        //   disable: [0, 3, -3, -2, -1, 1, 3, 4, 5],
        //   is_serve: 1
        // },
        {
          name: "派单",
          id: 6,
          disable: [0, 3, -3, -2, -1, 1, 3, 4, 5],
          is_serve: 1
        },
        {
          name: "发货",
          id: 2,
          disable: [0, 3, -3, -2, -1, 1, 3, 4, 5],
          is_serve: 0
        },
        // { name: "退款", id: 3, disable: [0, -2, -1, 5] },
        { name: "关闭订单", id: 4, disable: [-3] },
        { name: "备注", id: 5, disable: [] }
      ],
      currentOperate: null,
      price: null,
      deliverVisible: false,
      deliverItem: {},
      retainageItem: {},
      retainageVisible: false,
      refundForm: {},
      closeForm: {
        reason: ""
      },
      remarkForm: {
        remark: ""
      },
      serviceForm: {
        name: null,
        mobile: null
      },
      distributeForm: {
        agentName: null,
        agent: null
      }
    };
  },
  watch: {
    visible: function(val) {
      if (val) {
      }
    }
  },
  methods: {
    handleClose() {
      this.deliverVisible = false
      this.$emit('close')
    },
    querySearchAsync(string, cb) {
      getChooseAgentList({
        page: 1,
        condition: string ? string : null
      }).then(res => {
        if (res.code === 200) {
          console.log(res.data)
          if (res.data.length === 0) this.distributeForm.agent = null;
          cb(res.data);
        }
      });
    },
    handleSelect(item) {
      this.distributeForm.agent = item.id;
    },
    changeOrderPayment() {
      if (this.price) {
        changeOrderPayment({
          order_no: this.orderInfo.order_no,
          price: this.price
        }).then(res => {
          if (res.code === 200) {
            this.price = null;
            this.$message({
              message: "修改金额成功",
              type: "success"
            });
          }
        });
      } else {
        this.$message.error("请填写修改金额");
      }
    },
    orderDistribute() {
      this.$refs.distributeForm.validate(valid => {
        if (valid) {
          agentOrderDeliver({
            order_no: this.orderInfo.order_no,
            agent: this.distributeForm.agent
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: "分配成功",
                type: "success"
              });
              this.$emit("close");
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    orderService() {
      this.$refs.serviceForm.validate(valid => {
        if (valid) {
          agentOrderShangmen({
            order_no: this.orderInfo.order_no,
            realname: this.serviceForm.name,
            mobile: this.serviceForm.mobile
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: "分配成功",
                type: "success"
              });
              this.$emit("close");
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    orderClose() {
      this.$refs.closeForm.validate(valid => {
        if (valid) {
          closeOrder({
            order_no: this.orderInfo.order_no,
            remark: this.closeForm.reason
          }).then(res => {
            if (res.code === 200) {
              this.closeForm = {
                reason: ""
              };
              this.$message({
                message: "关闭成功",
                type: "success"
              });
              this.$emit("close");
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    orderRemark() {
      this.$refs.remarkForm.validate(valid => {
        if (valid) {
          remarkOrder({
            order_no: this.orderInfo.order_no,
            remark: this.remarkForm.remark
          }).then(res => {
            if (res.code === 200) {
              this.remarkForm = {
                remark: ""
              };
              this.$message({
                message: "备注成功",
                type: "success"
              });
              this.$emit("close");
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    deliver(item) {
      this.deliverItem = item;
      this.deliverVisible = true;
    }
  },
  created() {},
  components: {
    deliver
  }
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 18px;
}
.content {
  min-height: 150px;
  border: 1px solid #dfdfdf;
  padding: 10px;
  background-color: #efefef;
}
.small-cell {
  width: 100%;
  height: 100%;
  line-height: 80px;
}
.good-item {
  display: flex;
  img {
    margin-right: 5px;
    vertical-align: middle;
    margin-top: 15px;
    margin-left: 5px;
  }
}
</style>
